﻿<!DOCTYPE html>

<!-- map.js: overlapping maps -->

<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="js/three.min.js"></script>
	<script src="js/OrbitControls.js"></script>
	<link rel="stylesheet" href="example.css">
</head>

<body>
	<script type="module">
	
		import {Map} from '../map.js';
		import {scene, camera} from './example.js';

		var countryMap;
		
		new Map( '../map-ex.xml', loadCityMap );
		
		function loadCityMap( map )
		{
			countryMap = map;
			new Map( 'example-8.xml', drawMap );
		}

		function drawMap( cityMap )
		{
			// draw Bulgaria as 3D plate
			scene.add( countryMap.region3D( 'BG', 1, 'black' ) );
	
			// draw provinces outlines
			for( var regionName in countryMap.regions )
				if( regionName!='BG' )
					scene.add( countryMap.region2D( regionName, 1, 'gray' ) );

			// draw overlay map with city locations
			for( var cityName in cityMap.regions )
				if( cityName!='BG' )
				{
					var value = 0.1+2*Math.pow( Math.random(), 20 );
					
					var cone = new THREE.Mesh(
							new THREE.CylinderGeometry( 0.3+value/3, 0.4+value/2, value, 40 ).translate( 0, value/2, 0 ),
							new THREE.MeshPhysicalMaterial( {
									color: new THREE.Color( 2, 1, 0 ),
									roughness: 0.3,
									metalness: 0.8,
							} )
						);
						
					cone.position.copy( cityMap.center( cityName, 1 ) );
					scene.add( cone );
				}
					
			// draw tubes
			var names = Object.keys(cityMap.regions);

			for( var r1=0; r1<names.length-2; r1++ )
			{
				var p1 = cityMap.center( names[r1], 1 );
				
				for( var r2=r1+1; r2<names.length-1; r2++)
				{
					var p2 = cityMap.center( names[r2], 1 );
					var distance = p1.distanceTo(p2);
					
					if( Math.random() < 0.8/distance/distance )
					{
						var tube = new THREE.Mesh(
										new THREE.TorusGeometry( distance/2, 0.03, 8, 40, Math.PI ),
										new THREE.MeshPhongMaterial( {color: 'orange'} )
									);
						tube.position.addVectors( p1, p2 ).divideScalar( 2 );
						tube.rotation.y = -Math.atan2( p2.z-p1.z, p2.x-p1.x );
						tube.scale.y = 1;
						scene.add( tube );
					};
				}
				
			}
			
		}


	</script>
</body>
</html>


